﻿<div class="sample-detail">
    <div class="sample-detail-head-container sample-header">
        <div style="width: 700px; margin-left: 200px; display: inline-block; text-align: center" class="sample-head-wrapper">
            <a href="http://www.gcpowertools.com.cn/products/spreadjs/" target="_blank" class="sample-head-logo"></a>
            <div class="sample-head-text">{{feature + ' '}} </div>
        </div>
        <div class="featurebutton">
            <ul class="buttonlist">
                <li><div class="wordsize"> <a class="whiteColor" href="http://www.gcpowertools.com.cn/products/download.aspx?pid=57&utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=download&utm_campaign=javascript"><i class="icon-c1download"></i><br>下载</a></div></li>
                <li><div class="wordsize"><a class="whiteColor" href="http://7fvgvc.com1.z0.glb.clouddn.com/Intro/SpreadJS.mp4?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=video&utm_campaign=javascript"><i class="icon-film"></i><br>视频</a></div></li>
                <li class="wordsize"><div class="wordsize"><a class="whiteColor" href="http://www.gcpowertools.com.cn/products/spreadstudio/resources.htm?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=document&utm_campaign=javascript#document"><i class="icon-book"></i><br>资源</a></div> </li>
                <li><div class="wordsize"><a class="whiteColor" href="http://gcdn.gcpowertools.com.cn/showforum-3.aspx?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=forum&utm_campaign=javascript"><i class="icon-comments"></i><br>论坛</a></div></li>
                <li><div class="wordsize"><a class="whiteColor" href="http://www.gcpowertools.com.cn/order/price.htm?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=purchase&utm_campaign=javascript"><i class="icon-shopping-cart"></i><br>购买</a></div></li>
            </ul>
        </div>
    </div>
    <div class="sample-detail-supheader-container">
        <div class="sample-detail-supheader-wrapper">
            <div class="sample-detail-supheader">
                <div class="sample-detail-supheaderLeft">
                    <div class="sample-detail-link">
                        <a href="#/samples">
                            <div class="sample-detail-home"></div>
                        </a>
                    </div>
                    <select class="sample-detail-title" ng-model="featureItem" ng-options="item.name for item in featureDetails" select-list>
                    </select>
                    <div class="sample-detail-step">
                        <div class="sample-detail-step-text">
                            {{pageResource.featureStep + (nameIndex + 1) + pageResource.featureStepOf + featureDetails.length}}
                        </div>
                        <div class="sample-detail-step-pre" ng-click="preStep()"></div>
                        <div class="sample-detail-step-next" ng-click="nextStep()"></div>
                    </div>
                </div><div class="sample-detail-supheaderRight"></div>
            </div>
        </div>
    </div>
    <div class="sample-detail-main-container">
        <div class="sample-detail-main-wrapper">
            <div class="sample-detail-main" orientation="horizontal" splitScale="0.5" split-panel>
                <div class="sample-detail-description split-panel-first" content-load>
                </div>
                <div class="sample-detail-code split-panel-second" >
                    <div>
                        <div class="sample-detail-coderEditor-header sample-none-user-select ">
                            <div class="sample-detail-codeEditor-collapse" collapseBind="collapse-bind" collapse></div>
                            <span class="sample-detail-toggle-switch" toggle-switch>
                                <span class="sample-detail-toggle-link" ng-click="switchJS()">{{pageResource.codeBranches.codeJS}}</span>
                                <span class="sample-detail-toggle-link" ng-click="switchHTML()">{{pageResource.codeBranches.codeBody}}</span>
                                <span class="sample-detail-toggle-link" ng-click="switchCSS()">{{pageResource.codeBranches.codeCss}}</span>
                                <span class="sample-detail-toggle-link" ng-click="switchResources()">{{pageResource.codeBranches.codeResource}}</span>
                            </span>
                            <button class="sample-detail-codeEditor-button" ng-click="apply()">{{pageResource.codeEditorButtonText}}</button>
                        </div>
                        <div class="split-panel collapse-bind" orientation="vertical" splitScale="0.25" style="height:1000px" split-panel>
                            <div class="sample-detail-codeEditor split-panel-first">
                                <textarea style="display: none;" code-mirror></textarea>
                            </div>
                            <div class="split-panel-second">
                                <div class="sample-detail-coderResult-header sample-none-user-select">
                                    <div class="sample-detail-coderResult-text">{{pageResource.PreviewHeaderText}}</div>
                                    <button class="sample-detail-download-button" code-download>{{pageResource.CodeDownloadButtonText}}</button>
                                </div>
                                <div class="sample-detail-codeResult" code-apply>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="sample-footer">
    <div>
        <p>
            {{pageResource.footerText}}
        </p>
    </div>
</div>


